<template>
	<div>
		<div class="search">
			<span>添加有明确位置的埋点前，请先添加资源位</span>
			<div class="btn">
				<el-button size="mini" type="text" @click="handleOpenDrawer">添加</el-button>
			</div>
		</div>
		<el-table size="mini" border :data="tableData" style="width: 100%" v-loading="tableLoading">
			<el-table-column
				v-for="item in columns"
				:key="item.prop"
				:show-overflow-tooltip="true"
				:min-width="item.width"
				:prop="item.prop"
				:label="item.label">
				<template slot-scope="scope">
					<span
						v-if="item.prop === 'requirementType'"
						:class="'requirement-type-' + scope.row.requirementType">
						{{$handleRequirementType(scope.row.requirementType) || "--"}}
					</span>
					<span v-else>{{scope.row[item.prop] || "--"}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="action" label="操作" width="100">
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="text"
						v-if="handleShowAction(scope, 'edit')"
						@click="handleEditDrawer(scope)">编辑
					</el-button>
					<el-button
						size="mini"
						type="text"
						v-if="handleShowAction(scope, 'delete')"
						@click="handleEventStatus(scope, '删除', 0)">删除
					</el-button>
					<el-button
						size="mini"
						type="text"
						v-if="handleShowAction(scope, 'offline')"
						@click="handleEventStatus(scope, '下线', 1)">下线
					</el-button>
					<el-button
						size="mini"
						type="text"
						v-if="handleShowAction(scope, 'online')"
						@click="handleEventStatus(scope, '取消下线', 2)">取消下线
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="handleSize"
			@current-change="handlePage"
			:current-page="currentPage"
			:page-sizes="[10, 20, 30, 40]"
			:page-size="pageSize"
			background
			layout="total, prev, pager, next, sizes, jumper"
			:total="total">
		</el-pagination>
		<bury-form-module :info="buryDrawerInfo" @saveEvent="handleSaveEvent"></bury-form-module>
	</div>
</template>

<script>
	export default {
		name: "eventTable",
		data() {
			return {
				requirementId: null,
				pageDbId: null,
				pageId: null,
				sdkType: null,
				currentPage: 1,
				pageSize: 10,
				total: 0,
				tableData: [],
				tableLoading: false,
				columns: [
					{
						prop: "trackName",
						label: "埋点名称",
						width: 200,
					},
					{
						prop: "trackId",
						label: "埋点标识",
						width: 200,
					},
					{
						prop: "eventName",
						label: "事件名称",
						width: 100,
					},
					{
						prop: "requirementType",
						label: "需求类型",
						width: 100,
					},
				],
				//  drawer: 埋点
				buryDrawerInfo: {
					treeMenu:null,     // 导航信息
					requirementId: null,
					pageId: null,
					trackDbId: null,
					type: "drawer"
				}
			}
		},
		props: {
			infoProps:{
				type: Array,
				default() {
					return []
				}
			},
			treeProps:{
				type: Array,
				default() {
					return []
				}
			},
			searchArgs: {
				type: Object,
				default() {
					return {
						id: 249,
					}
				}
			},
			openDrawer: {
				type: Boolean
			}
		},
		watch: {
			searchArgs: {
				handler: function (val) {
					let {requirementId, pageDbId} = val;
					this.requirementId = requirementId;
					this.pageDbId = pageDbId;
					if (pageDbId) {
						this.handleQueryPage(pageDbId);
					}
				},
				deep: true,
				immediate: true
			},
		},
		created() {
			this.buryDrawerInfo.treeMenu = JSON.parse(JSON.stringify(this.treeProps));
			console.log(this.infoProps,'标识');
			console.log(this.treeProps,'导航');
			console.log(this.searchArgs,'原来')
		},
		mounted() {
		},
		methods: {
			// 页面详情，并获取pageId、sdkType，来关联埋点
			async handleQueryPage(id) {
				let data = {
					id
				};
				let res = await this.$pageApi.pageQuery(data);
				if (res) {
					let {pageId, sdkType} = res.value;
					this.pageId = pageId;
					this.sdkType = sdkType;
					this.currentPage = 1;
					this.handleEventList();
				}
			},
			handleSize(size) {
				this.currentPage = 1;
				this.pageSize = size;
				this.handleEventList();
			},
			handlePage(page) {
				this.currentPage = page;
				this.handleEventList();
			},
			// 埋点操作类型
			handleShowAction(scope, type) {
				let {requirementType} = scope.row;
				requirementType = Number(requirementType);
				if (type === "edit") {
					if (requirementType === 0 || requirementType === 1 || requirementType === 2) {
						return true;
					}
				} else if (type === "delete") {
					if (requirementType === 1) {
						return true;
					}
				} else if (type === "offline") {
					if (requirementType === 0 || requirementType === 2) {
						return true;
					}
				} else if (type === "online") {
					if (requirementType === 3 || requirementType === 4) {
						return true;
					}
				}
			},
			// 埋点状态更改
			handleEventStatus(scope, type, operateType) {
				this.$confirm(`您确定要${type}该埋点吗？`, type, {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.handleEventStatusUpdate(scope, type, operateType);
				}).catch(() => {
				})
			},
			// 接口：状态变更
			async handleEventStatusUpdate(scope, type, operateType) {
				let {id} = scope.row;
				let data = {
					id,
					operateType
				}
				let res = await this.$eventApi.eventStatusUpdate(data);
				if (res) {
					this.$message({
						type: 'success',
						message: type + '成功!'
					});
					this.handleEventList();
				}
			},
			// 埋点列表
			async handleEventList() {
				this.tableLoading = true;
				let {requirementId, hasChildren, trackName} = this.searchArgs;
				let {currentPage, pageSize} = this;
				let data = {
					requirementId,
					pageId: this.pageId,
					sdkType: this.sdkType,
					// sdkType: 1,
					// pageId: "testPage1",
					hasChildren,
					trackName,
					currentPage,
					pageSize,
				}
				try {
					let res = await this.$eventApi.eventList(data);
					if (res) {
						let {list, total} = res.value;
						this.tableData = list;
						this.total = total;
					}
					this.tableLoading = false;
				} catch (e) {
					this.tableLoading = false;
				}
			},
			// 打开埋点drawer：添加
			handleOpenDrawer() {
				let {imageUrl} = this.$store.state.publicData;
				this.buryDrawerInfo = {
					requirementId: this.requirementId,
					pageId: this.pageId,
					trackDbId: null,
					treeMenu: JSON.parse(JSON.stringify(this.treeProps)),
					type: "drawer",
					buryForm: {},
					imageUrl
				};
			},
			// 打开埋点drawer：修改
			handleEditDrawer(scope) {
				let {imageUrl} = this.$store.state.publicData;
				let {id} = scope.row;
				this.buryDrawerInfo = {
					requirementId: this.requirementId,
					pageId: this.pageId,
					trackDbId: id,
					treeMenu: JSON.parse(JSON.stringify(this.treeProps)),
					type: "drawer",
					buryForm: scope.row,
					imageUrl
				};
			},
			handleSaveEvent(status) {
				if (status) {
					this.handleEventList();
				}
			},
		}
	}
</script>

<style scoped>

</style>
